<template>
	<view class="content">
		<scroll-view :scroll-top="topScroll" scroll-y="true" class="scroll-Y" @scroll="scroll">
			<view class="item-box">
				<view class="item" v-for="(item,i) in oldJson" @click="deleteFunction(i)">
					<view class="title">
						{{ item.text }}
					</view>

					<view class="path">
						{{ item.path }}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	const oldJson = ref([])
	const topScroll = ref(0)

	const scroll = (e) => {
		topScroll.value = e.detail.scrollTop
	}

	const deleteFunction = (index) => {

		uni.showModal({
			title: '警告',
			content: '确认要删除该项吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('点击了确认')

					let data = []
					for (let i = 0; i < oldJson.value.length; i++) {

						if (index == i) {} else {
							data.push(oldJson.value[i])
						}
					}
					uni.setStorageSync('data', JSON.stringify(data));

					uni.showToast({
						title: '删除完成'
					})
					oldJson.value = data
				} else {
					console.log('点击了取消')
				}
			}
		})
	}


	onLoad(() => {
		uni.getStorage({
			key: "data",
			success(res) {
				let data = JSON.parse(res.data)
				oldJson.value = data

				if (!data[0]) {
					oldJson.value = []
				}
			},
			fail(err) {
				oldJson.value = []
			}
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 10rpx;

		.scroll-Y {
			height: calc(100vh - 20rpx);

			.item-box {
				.item {
					margin-bottom: 10rpx;
					padding: 10rpx;
					background-color: #c8e3e3;
					border-radius: 6rpx;

					.title {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.path {
						font-size: 12px;
						display: inline-block;
						max-width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>